<template>
	<view style="background-color: #f5f5f5;">
		<global-contact></global-contact>
		<!-- 年会详情 -->
		<view class="swiper" style="position: relative;">
			<!-- 
				showTitle
				 keyName="image" -->
			<u-swiper :list="banner" @change="e => currentNum = e.current" :autoplay="true" height="400rpx"
				imgMode="aspectFill" :circular="true" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ banner.length }}</text>
				</view>
			</u-swiper>
			<image v-if="details" :src="showImg + details.logo" mode="aspectFit"
				style="position: absolute;bottom: -30rpx;left: 10rpx;width: 200rpx;height: 100rpx;"></image>
		</view>
		<view class="people_num">团建案例|浏览 {{ details.hit }}</view>
		<view class="info">
			<view class="title">
				<view class="left">{{ details.title }}</view>
				<view class="collect" @click="collected()">
					<image
						:src="details.love == 1 ? 'https://www.atuanjian.com/appletStatic/static/detail/like.png' : 'https://www.atuanjian.com/appletStatic/static/detail/nolike.png'"
						mode=""></image>
					<text>收藏</text>
				</view>
			</view>
			<!-- 主要内容详情abstract -->
			<view class="abstract">
				<image src="https://www.atuanjian.com/appletStatic/static/syh.png" mode=""></image>
				<view class="">
					{{ details.abstract }}
				</view>
			</view>

			<view class="price">
				<view class="left">
					<image src="https://www.atuanjian.com/appletStatic/static/home/a2.png" mode=""></image>
					<text>天数：{{ details.activity_day || '' }}</text>
				</view>
				<view class="right">
					<image src="https://www.atuanjian.com/appletStatic/static/home/a3.png" mode=""
						style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"></image>
					<text>车程：{{ details.drive || '' }}</text>
				</view>
			</view>
			<view class="person">
				<view class="left">
					<image src="https://www.atuanjian.com/appletStatic/static/home/a1.png" mode=""></image>
					<text>人数：{{ details.people_num || '' }}</text>
				</view>
				<view class="right" style="align-items: flex-start;">
					<image src="https://www.atuanjian.com/appletStatic/static/home/a3.png" mode=""
						style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"></image>
					<text
						style="width: 300rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">地点：{{ details.place_title || '暂无地址' }}</text>
				</view>
			</view>
		</view>

		<!-- 详情内容 -->
		<view class="content">
			<mp-html :content="details.content" />
			<!-- 行程安排 -->
			<!-- details -->
		</view>

		<!-- 新加相关产品 团建-->
		<block v-if="details && JSON.stringify(details.products) != '[]' && details.products && details.products.length > 0">
			<view class="aboutVideo" style="padding-bottom: 20rpx;">
				<view class="aboutCate">相关产品</view>
				<view class="about_item" v-for="(item, index) in details.products" :key="index"
					@click="viewProduct(item)">
					<image mode="aspectFill" :src="showImg + item.img"></image>
					<view class="about_txt">{{ item.title }}</view>
					<view class="p_txt"
						style="text-align: left;padding-left: 10rpx;display: flex;justify-content: space-between;align-items: center;">
						<view class="txt_W">
							<text style="color:#666666;">{{ item.day_num || 0 }}</text>
							<text style="margin: 0 20rpx;color:#666666;"> | </text>
							<text style="color:#666666;">{{ item.people_num || 0 }}</text>
						</view>
						<view class="">
							<text style="color:#F9531B;font-size:34rpx;">{{ item.people_price || '' }}</text>
							<text style="color:#F9531B;font-size:34rpx;">{{ item.people_price_unit || '' }}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 新加相关视频 -->
		<block
			v-if="details && details.videos && JSON.stringify(details.videos) != '[]' && details.videos && details.videos.length > 0">
			<view class="aboutVideo">
				<view class="aboutCate">相关视频</view>
				<view class="about_item" style="position: relative;" v-for="(item, index) in details.videos" :key="index"
					@click="viewVideo(item)">
					<image mode="aspectFill" :src="showImg + item.img"></image>
					<view class="about_txt">{{ item.title }}</view>
					<image
						style="width: 92rpx;height: 92rpx;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: 999;"
						src="https://www.atuanjian.com/appletStatic/static/play.png" mode="aspectFill"></image>
				</view>
			</view>
		</block>


		<!-- 底部 -->
		<view class="footer">
			<view class="wrap_box">
				<view class="item" @click="toIndex()">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i1.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="item">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i2.png" mode=""></image>
					<text>客服</text>
					<button type="default" open-type="contact"></button>
				</view>
				<!-- 		<view class="item" @click="makeCall">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i3.png" mode=""></image>
					<text>立即致电</text>
				</view>
				<view class="item" @click="shareData">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i4.png" mode=""></image>
					<text>立即分享</text>
				</view> -->
				<view class="item" @click="handleNavCar">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-21.png" mode=""></image>
					<text>购物车</text>
				</view>
				<!-- <view class="submit" @click="orderSource">立即预定</view> -->
				<view class="btn-box">
					<view class="btn-box-1" @click="handleCar">加入购物车</view>
					<view class="btn-box-1" style="background-color: #FFBB50;" @click="handleShop">立即购物</view>
				</view>
			</view>
		</view>

		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="shareItem">
						<text class="txt">截止时间：</text>
						<input type="text" :value="inputTime" placeholder="请选择截止时间" disabled="" @click="selectTime" />
					</view>
					<view class="shareItem">
						<text class="txt">备 注：</text>
						<u--input placeholder="请输入备注内容" border="surround" v-model="noticeVal"></u--input>
					</view>
					<view class="shareItem overBtn">
						<u-button text="取消" @click="cancelOver"></u-button>
						<u-button text="确定" type="primary" @click="sureOver"></u-button>
					</view>

				</view>
			</view>
		</u-overlay>
		<u-datetime-picker ref="datetimePicker" :show="show2" v-model="endTime" mode="datetime" @confirm="confirm"
			@cancel="cancel" :formatter="formatter"></u-datetime-picker>

	</view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
import {
	getCaseDetail,
	addCollection,
	productSharedata,
	addCard
} from '@/utils/request.js'
export default {
	data() {
		return {
			detailId: '',
			show: false,
			noticeVal: '', //备注
			show2: false,
			endTime: Number(new Date()), //时间
			inputTime: '',
			values: 1,
			end_date: '',
			product_type: 12,
			showImg: '',
			currentNum: 0,
			collect: false,
			banner: [],
			navIndex: 0,
			navList: [{
				text: '产品介绍'
			}, {
				text: '行程安排'
			}, {
				text: '费用说明'
			}, {
				text: '预定须知'
			}],
			// 中间nav 
			navType: 'v0',
			g1: 0,
			g2: 0,
			g3: 0,
			g4: 0,

			details: null,
			userInfo: null,

			tips: false
		}
	},

	components: {
		mpHtml
	},
	// onReady() {
	// 	// 微信小程序需要用此写法
	// 	this.$refs.datetimePicker.setFormatter(this.formatter)
	// },
	computed: {
		overCondition() {
			if (this.details && this.details.keywords && this.details.keywords.split(',').length > 2 && !this.tips) {
				return true
			} else {
				return false
			}
		}
	},
	methods: {
		async addCard(data) {
			return await addCard(data)
		},
		handleCar() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, product_id: this.detailId, type: this.product_type }
			this.addCard(data).then(res => {
				uni.showToast({
					title: '添加成功'
				})
			})
		},
		handleShop() {
			uni.navigateTo({
				url: '/pagesB/shopCar/pay?order_type=' + 2 + '&product_id=' + this.detailId + '&product_type=' + this.product_type
			})
		},
		viewProduct(item) {
			uni.navigateTo({
				url: `/pagesA/detail/product?id=${item.id}`
			})
		},
		// 查看视频
		viewVideo(item) {
			let json = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/videoList/detail?params=${json}`
			})
		},
		handleNavCar() {
			uni.navigateTo({
				url: '/pagesB/shopCar/shopCar'
			})
		},
		toIndex() {
			uni.redirectTo({
				url: '/pages/home/home'
			})
		},
		orderSource() {
			uni.navigateTo({
				url: '/pagesA/need/need?id=6'
			})

		},
		makeCall() {
			uni.makePhoneCall({
				phoneNumber: '13022861002'
			})
		},
		openMore() {
			this.tips = !this.tips
		},
		selectTime() {
			console.log('选择时间')
			this.show2 = true
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		cancelOver() {
			this.show = false
		},
		confirm(val) {
			let time = this.formData(val.value)
			console.log('选择时间', time)
			this.end_date = time
			this.inputTime = time

		},
		formData(val) {
			let date = new Date(val)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let h = date.getHours()
			let m = date.getMinutes()
			let s = date.getSeconds()
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			if (h < 10) {
				h = '0' + h
			}
			if (m < 10) {
				m = '0' + m
			}
			if (s < 10) {
				s = '0' + s
			}
			return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
		},
		cancel() {
			this.show2 = false
		},
		// productSharedata
		async productSharedata(data) {
			return await productSharedata(data)
		},
		sureOver() {
			// return 
			let shareInfo = []
			this.details.costList.forEach((val, index) => {
				val.child.forEach((item, i) => {
					shareInfo.push({
						cost_listing_id: item.id,
						number: item.number_between,
						day_number: item.day_between
					})
				})
			})
			let data = {
				token: JSON.parse(uni.getStorageSync('userInfo')).token,
				name: JSON.parse(uni.getStorageSync('userInfo')).nickName,
				phone: uni.getStorageSync('phone'),
				end_date: this.end_date,
				descr: this.noticeVal,
				url: '/case',
				id: this.details.id,
				cat_id: this.details.category_id,
				content_title: this.details.title,
				shareData: shareInfo
			}
			this.productSharedata(data).then(res => {
				console.log(res)
				this.show = false
			})
		},
		shareData() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return;
			}
			this.show = true
			let date = new Date()

			this.inputTime = this.formData(date.getTime())
			this.end_date = this.formData(date.getTime())
		},

		cont(val1, val2, val3) {
			// console.log(val1,val2,val3)
			if (parseInt(val1) && parseInt(val2) && parseInt(val3)) {
				// console.log('总数',parseInt(val1)*parseInt(val2)*parseInt(val3))
				return parseInt(val1) * parseInt(val2) * parseInt(val3)
			} else {
				return 0;
			}
		},
		changeNum() {
			// console.log(123)
		},



		async addCollection(data) {
			return await addCollection(data)
		},
		async getCaseDetail(data) {
			return await getCaseDetail(data)
		},
		collected() {
			// this.collect=!this.collect
			if (!this.userInfo) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					}
				})
			} else {
				if (this.details.love != 1) {
					let data = {
						token: this.userInfo.token,
						id: this.details.id,
						category_id: this.details.category_id
					}
					this.addCollection(data).then(res => {
						this.details.love = 1
					}).catch(err => {

					})
				}
			}
		},


		getDetail(id) {
			let data = {
				id
			}
			this.getCaseDetail(data).then(res => {
				this.details = res
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: res.title // 自定义标题内容
				})
				console.log('案例详情', res)
				res.img_arr.forEach(val => {
					this.banner.push(this.showImg + val)
					// this.banner.push({
					// 	image:this.showImg+val.img,
					// 	title:val.title
					// })
				})
				console.log('banner', this.banner)
				// this.getOffsetTop('#g1',0);
				// this.getOffsetTop('#g2',1);
				// this.getOffsetTop('#g3',2);
				// this.getOffsetTop('#g4',3);   
			}).catch(err => {
				console.log(err)
			})
		},
		navClick(index) {
			if (this.navIndex != index) {
				this.navIndex = index
				if (index == 0) {
					this.setPageScroll(this.g1)
					this.navType = 'v0'
				} else if (index == 1) {
					this.setPageScroll(this.g2)
					this.navType = 'v1'
				} else if (index == 2) {
					this.setPageScroll(this.g3)
					this.navType = 'v2'
				} else {
					this.setPageScroll(this.g4)
					this.navType = 'v3'
				}
			}
		},
		setPageScroll(distance) {
			uni.pageScrollTo({
				scrollTop: distance - 43,
				duration: 500
			})
		},
		getOffsetTop(id, index) {
			const query = uni.createSelectorQuery().in(this);
			const t = this;
			query.select(id).boundingClientRect(data => {
				switch (index) {
					case 0:
						t.g1 = data.top;
						break;
					case 1:
						t.g2 = data.top;
						break;
					case 2:
						t.g3 = data.top;
						break;
					case 3:
						t.g4 = data.top;
						break;

				}
			}).exec();
		},

	},
	mounted() {
		// this.getOffsetTop('#g1',0);
		// this.getOffsetTop('#g2',1);
		// this.getOffsetTop('#g3',2);
		// this.getOffsetTop('#g4',3);    
	},
	onShareAppMessage(res) {
		return {
			title: this.details.title,
			path: `/pagesA/detail/case?id=${this.detailId}`,
			imageUrl: this.banner[0]
		}
	},
	onShareTimeline(res) {
		return {
			title: this.details.title,
			path: `/pagesA/detail/case?id=${this.detailId}`,
			imageUrl: this.banner[0]
		}
	},
	onPageScroll(e) {
		// let h=e.scrollTop+50
		//  if(h<this.g2){
		// 	 this.navIndex=0
		// 	 this.navType='v0'
		//  }else if(h<this.g3){
		// 	 this.navIndex=1
		// 	 this.navType='v1'
		//  }else if(h>=this.g3&&h<this.g3+150){
		// 	 this.navIndex=2
		// 	 this.navType='v2'
		//  }else{
		// 	 this.navIndex=3
		// 	 this.navType='v3'
		//  } 
	},
	onLoad(option) {
		this.showImg = this.$config.showImgApi;
		if (option.scene) {
			const detailId = decodeURIComponent(option.scene);
			this.detailId = detailId.split('=')[1]
		} else {
			this.detailId = option.id
		}
		this.getDetail(this.detailId)
		// console.log('detail2',option)
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
		}
	},
	// onShareAppMessage() {
	// 	return {
	// 		title:details.title,
	// 		path:`/pagesA/detail/case?id=${this.detailId}`,
	// 		imageUrl:this.banner[0]
	// 	}
	// } 
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.aboutVideo {
	background-color: #FFFFFF;
	padding: 0 30rpx;

	.aboutCate {
		font-size: 30rpx;
		text-align: center;
		font-weight: bolder;
		line-height: 70rpx;
	}

	.about_item {
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 690rpx;
			height: 440rpx;
		}

		.about_txt {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			font-size: 34rpx;
			line-height: 60rpx;
		}
	}
}

.rect {
	width: 80%;
	position: absolute;
	top: 40%;
	right: 0;
	// bottom: 0;
	left: 0;
	margin: auto;
	background-color: #FFFFFF;
	padding: 30rpx;
	border-radius: 10rpx;

	.shareItem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: row nowrap;
		margin-bottom: 30rpx;

		.txt {
			width: 180rpx;
		}
	}

	.overBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row nowrap;

		// text{
		// 	font-size: 24rpx;
		// 	margin: 0 20rpx;
		// }
		.u-button {
			width: 30%;
			margin: 0 20rpx;
		}
	}
}

.indicator-num {
	padding: 4rpx 18rpx 6rpx;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 22rpx;
	width: 80rpx;
	@include flex;
	justify-content: center;

	&__text {
		color: #FFFFFF;
		font-size: 26rpx;
	}
}

.info {
	padding: 30rpx 30rpx 24rpx 30rpx;
	background-color: #FFFFFF;

	.title {
		@include flex_style(space-between, center, row nowrap);
		margin-bottom: 20rpx;

		.left {
			width: 620rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 60rpx;
			color: #1A1A1A;
		}

		.collect {
			@include flex_style(center, center, column nowrap);

			image {
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 18rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}
	}

	.tips {
		@include flex_style(flex-start, center, row wrap);

		text {
			display: block;
			margin-right: 12rpx;
			padding: 0 20rpx;
			line-height: 48rpx;
			background-color: #FFB850;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.subTit {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #888888;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin-bottom: 22rpx;
	}

	.abstract {
		display: flex;
		margin: 30rpx 0;

		image {
			width: 40rpx;
			height: 30rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		view {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #1A1A1A;
		}

	}

	.price {
		@include flex_style(space-between, center, row nowrap);
		background-color: #F8F8F8;
		padding: 20rpx 0;

		.left {
			@include flex_style(flex-start, center, row nowrap);
			flex: 1;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}

		.right {
			@include flex_style(flex-start, center, row nowrap);
			flex: 1;
			font-size: 24rpx;
			font-family: 苹方-简;
			font-weight: normal;
			line-height: 32rpx;
			color: #1A1A1A;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			// text{
			// 	font-size: 36rpx;
			// 	color: #FF5E00;
			// }
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}
	}

	.person {
		background-color: #F8F8F8;
		padding: 20rpx 0;
		@include flex_style(space-between, center, row nowrap);

		.left {
			@include flex_style(flex-start, center, row nowrap);
			flex: 1;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}

		.right {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #888888;
			@include flex_style(flex-start, center, row nowrap);

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}
	}
}

.write {
	background-color: #FFFFFF;
	margin: 16rpx 0;
	padding: 32rpx 40rpx 32rpx 60rpx;
	@include flex_style(space-between, center, row nowrap);

	.text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #666666;
	}

	.btn {
		width: 240rpx;
		height: 72rpx;
		background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
		opacity: 0.92;
		border-radius: 36px;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
}

.content {
	background-color: #FFFFFF;
	padding: 0 30rpx 30rpx;

	.wraps {
		padding-left: 30rpx;
		padding-top: 30rpx;
		@include flex_style(flex-start, center, row nowrap);
		white-space: nowrap;
		border-bottom: 2rpx solid #F5F5F5;

		.item {
			@include flex_style(flex-start, center, column nowrap);
			margin-right: 54rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}

			.line {
				width: 120rpx;
				height: 8rpx;
				margin-top: 22rpx;
				background-color: #FFFFFF;
			}
		}

		.active {
			text {
				font-size: 30rpx;
				font-weight: bold;
			}

			.line {
				background-color: #FFB850;
			}
		}
	}

	.items1 {
		margin-top: 48rpx;

		.titleName {
			@include flex_style(center, center, row nowrap);
			margin-bottom: 34rpx;

			image {
				width: 288rpx;
				height: 44rpx;
			}
		}

		.contain {
			@include flex_style(space-between, center, row wrap);

			image {
				width: 340rpx;
				height: 205rpx;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #1A1A1A;
			}
		}

		.direction {
			width: 690rpx;
			height: 152rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			@include flex_style(space-between, center, row wrap);
			align-content: space-between;
			background-color: #F8F8F8;
			border-radius: 8rpx;

			// margin-bottom: 30rpx;
			.item {
				width: 50%;
				@include flex_style(flex-start, center, row nowrap);

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #1A1A1A;
				}
			}
		}

		.date {
			margin-top: 30rpx;
			position: relative;

			.day {
				@include flex_style(flex-start, center, row wrap);
				margin-bottom: 30rpx;

				.sort {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					background-color: #FF6F00;
					text-align: center;
					line-height: 52rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 32rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 34rpx;
					color: #1A1A1A;
				}
			}

			.time {
				margin-bottom: 32rpx;
				padding-left: 18rpx;

				.tit {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #1A1A1A;
					@include flex_style(flex-start, center, row wrap);
				}

				.tit:before {
					content: '';
					display: block;
					// display: inline-block;
					// vertical-align: middle;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #FF6F00;
					margin-right: 40rpx;
				}

				.img {
					padding-left: 40rpx;

					image {
						width: 620rpx;
						height: 408rpx;
						margin-top: 24rpx;
					}
				}
			}

			.endday {
				@include flex_style(flex-start, center, row wrap);

				.sort {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					background-color: #FF6F00;
					text-align: center;
					line-height: 52rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 32rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 34rpx;
					color: #1A1A1A;
					margin-right: 32rpx;
				}

				.make {
					width: 200rpx;
					height: 56rpx;
					background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
					opacity: 0.92;
					border-radius: 28rpx;
					text-align: center;


					text {
						line-height: 56rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

						margin-right: 0;
					}

					button {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: 0;
						z-index: 10;
						opacity: 0;
					}

				}
			}
		}

		.date:before {
			content: '';
			display: block;
			position: absolute;
			background-color: #FF6F00;
			width: 3rpx;
			left: 26rpx;
			top: 0;
			bottom: 0;
		}
	}

	.items3 {
		margin-top: 40rpx;

		.titleName {
			@include flex_style(center, center, row nowrap);
			margin-bottom: 32rpx;

			image {
				width: 288rpx;
				height: 44rpx;
			}
		}

		.words {
			margin-top: 20rpx;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 34rpx;
				color: #FFB850;
				margin-bottom: 16rpx;
			}

			.ul {
				.li {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					color: #1A1A1A;
				}
			}
		}
	}
}

.footer {
	width: 750rpx;
	height: 104rpx;

	.wrap_box {
		border-top: 1px solid #F5F5F5;
		background-color: #FFFFFF;
		padding: 24rpx 0;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding-left: 30rpx;
		@include flex_style(space-between, center, row nowrap);

		.btn-box {
			border-radius: 448rpx;
			height: 76rpx;
			@include flex_style(start, center, row nowrap);
			border-radius: 64rpx;
			overflow: hidden;
			margin-right: 48rpx;

			.btn-box-1 {
				width: 224rpx;
				height: 100%;
				background-color: #333333;
				text-align: center;
				line-height: 76rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.item {
			@include flex_style(center, center, column nowrap);
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #1A1A1A;
			}

			button {
				position: absolute;
				top: 0;
				left: 0;
				width: 88rpx;
				height: 84rpx;
				opacity: 0;
			}
		}

		.submit {
			width: 270rpx;
			height: 104rpx;
			background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
			line-height: 104rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}


.table {
	background-color: #FFFFFF;
	padding: 10rpx;
	margin: 10rpx auto;

	.ul {
		.li {
			margin-bottom: 20rpx;

			.title {
				text-align: center;
			}

			.navList {
				background-color: #CCCCCC;
				margin-bottom: 10rpx;

				text {
					text-align: center;
					display: block;
					// width: 20%; 
					// font-size: 28rpx;
					font-size: 24rpx;
				}
			}

			.tip,
			.navList {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-flow: row nowrap;
			}

			.item {
				.tip {
					display: inline-block;
					vertical-align: middle;
					height: 66rpx;

					// .u-number-box{
					// display: inline-block;
					// 	vertical-align: middle;
					// }
					text {
						display: inline-block;
						vertical-align: middle;
					}
				}
			}

			.tip {
				text-align: center;
				justify-content: center;
				font-size: 20rpx;
			}

			.item {
				.tip {

					// width: 22%;
					.tit {
						// width: 160rpx!important;

					}
				}
			}

			.tip {

				// font-size: 26rpx;
				.u-number-box__plus {
					width: 40rpx !important;
					// display: none!important;
				}

				.u-number-box__minus {
					width: 40rpx !important;
					// display: none!important;
				}

				.u-number-box__input {
					background-color: #FFFFFF !important;
					// border-bottom: 1rpx solid #C8C7CC;
					height: 52rpx;
				}

			}
		}
	}
}

.over {
	height: 70rpx;
	overflow: hidden;
}

.tips_w {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-flow: row nowrap;
}

.people_num {
	color: #969696;
	font-size: 13px;
	background-color: #FFFFFF;
	text-align: right;
	// line-height: 40rpx;
	padding-top: 30rpx;
	padding-right: 30rpx;
}
</style>